<template>
<div>
   <h1>分类列表</h1>
  
  <el-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="_id"
    border
    :tree-props="{children: 'children',hasChildren: 'hasChildren'}">
    <el-table-column prop="name" label="分类名称"></el-table-column>
    <el-table-column prop="_id" label="ID" width="240"></el-table-column>
    <el-table-column fixed="right" label="操作" width="180">
      <template slot-scope="scope">
        <el-button
          type="primary"
          size="small"
          @click="$router.push(`/categories/edit/${scope.row._id}`)"
        >编辑</el-button>
        <el-button type="danger" size="small" @click="remove(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

</div>
</template>
<script>
export default {
  name: 'CategoryList',
  data () {
    return {
      tableData: []
    }
  },
  created () {
    this.fetch()
  },
  methods: {
    async fetch () {
      const result = await this.$http.get('/rest/categories',{
        params: {
           $where: "this.parents.length <= 0"
        }
      })
      if(result.data){
        let data = result.data.map( item=>{
        let tData =  []
        let obj ={
                    name: item.name,
                    parents: item.parents,
                    _id: item._id
                  }
          if(item.children.length > 0){
            obj.children = item.children
            // obj.hasChildren = true
            // obj.children.map( (id)=>{
            //   this.$http.get(`/rest/categories/${id}`).then(result=>{
            //     const item = result.data
            //     tData.push({
            //       name: item.name,
            //       parents: item.parents,
            //       _id: item._id,
            //     })
            //   })
            // })
            // obj.children = tData
            this.$http.get(`/rest/categories/ids/${obj.children}`).then(result=>{
               let children = result.data
               children.map(item=>{
                tData.push({
                  name: item.name,
                  parents: item.parents,
                  _id: item._id,
                })
               })
            })
              obj.children = tData
          }
        
        return obj
      })
      this.$set(this.$data,'tableData',data)
      this.$forceUpdate()
    //  / this.c = data
      }
    },
    async remove (row) {
      this.$confirm(`是否要删除分类"${row.name}"?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const result = await this.$http.delete(`/rest/categories/${row._id}`)
        if(result.data.success){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.fetch()
        }else{
          this.$message({
            type: 'error',
            message: '删除失败!'
          });
        }
      }).catch(()=>{
        
      })
    }
  },
  computed: {
      // handleData: function(){
      //  return  this.tableData.map(item=>{
      //     let obj = {
      //                 childrens: item.children,
      //                 name: item.name,
      //                 parents: item.parents,
      //                 _id: item._id
      //               }
      //     //  hasChildren: item.children.length > 0
          
      //     if(item.children.length > 0){
      //       obj.hasChildren = true
      //     }
      //     return obj
      //   })
      // }
  },
  watch: {
    // tableData: async function(newVal){
    //         //获得每个children数据
    //   let data = newVal.map( item=>{
    //     let tData =  []
    //     let obj = {
    //                 childrens: item.children,
    //                 name: item.name,
    //                 parents: item.parents,
    //                 _id: item._id
    //               }
    //      obj.childrens.map(async (id)=>{
    //       const result = await this.$http.get(`/rest/categories/${id}`)
    //       tData.push(result.data)
    //     })
    //    tData = tData.map(item=>{
    //       return {
    //         childrens: item.children,
    //         name: item.name,
    //         parents: item.parents,
    //         _id: item._id,
    //       }
    //     })
    //     //  hasChildren: item.children.length > 0
    //     obj.childrens = tData
        
    //     if(item.children.length > 0){
    //       obj.hasChildren = true
    //     }
        
    //     return obj
    //   })
    //   this.handleData = data
    // }
  },
}
</script>
